<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/recordFiling' }"
      >备案管理</el-breadcrumb-item>
      <el-breadcrumb-item v-if="!idS">新增</el-breadcrumb-item>
      <el-breadcrumb-item v-else>编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item label="早餐:" style="width: 24%">
                {{ ruleForm.breakfast }}
              </el-form-item>
              <el-form-item label="中餐:" style="width: 24%">
                {{ ruleForm.lunch }}
              </el-form-item>
              <el-form-item label="晚餐:" style="width: 24%">
                {{ ruleForm.supper }}
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <div class="cad-box" style="margin: 20px 0">
      <div class="obj_title">图片上传</div>
      <div
        v-for="(item, index) in fielForList"
        :key="index"
        class="obj_bt_box"
        style="display: flex; margin-top: 30px"
      >
        <div class="box_label" style="width: 150px">
          <span>{{ `${item.name}` }}：</span>
        </div>
        <div class="box_value">
          <el-upload
            disabled
            action="/api/system/upload"
            list-type="picture-card"
            accept="image/*"
            :auto-upload="true"
            :file-list="fileSumList[item.filelistName]"
            :on-success="
              (response, file, fileList) =>
                handleFileSuccess(response, file, fileList, item)
            "
            :before-upload="handleBefore"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                style="height: 148px"
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <!-- <span class="text">{{ file.name }}</span> -->
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <!-- <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file, item)"
                >
                  <i class="el-icon-delete" />
                </span> -->
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getById } from './api'
export default {
  data () {
    return {
      ruleForm: {
        breakfast: '', // 早餐
        lunch: '',
        supper: '',
        trophicAnalysis: '', // 营养分析
        breakfastImg: '',
        lunchImg: '',
        supperImg: ''
      },

      rules: {
        breakfast: [
          { required: true, message: '请输入早餐内容', trigger: 'blur' }
        ],
        lunch: [{ required: true, message: '请输入中餐内容', trigger: 'blur' }],
        supper: [
          { required: true, message: '请输入晚餐内容', trigger: 'blur' }
        ]
      },
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      fileSumList: {
        fileList: [],
        fileList1: [],
        fileList2: [],
        fileList3: []
      },
      fielForList: [
        {
          name: '营养食谱',
          filelistName: 'fileList',
          status: 'trophicAnalysis'
        },
        {
          name: '早餐留样',
          filelistName: 'fileList1',
          status: 'breakfastImg'
        },
        {
          name: '午餐留样',
          filelistName: 'fileList2',
          status: 'lunchImg'
        },
        {
          name: '晚餐留样',
          filelistName: 'fileList3',
          status: 'supperImg'
        }
      ],
      caseShow: false,
      dataObj: {}
    }
  },
  computed: {
    ...mapGetters(['curArea', 'user'])
  },
  created () {
    const { id } = this.$route.query
    this.idS = id
    this.handleGetDetail()
  },

  mounted () {},
  methods: {
    async handleGetDetail () {
      const res = await getById({
        id: this.idS
      })
      this.dataObj = res
      this.handleEdit()
    },
    handleFileImage (fileUrl, uid) {
      return {
        uid: uid,
        name: '',
        url: fileUrl
      }
    },
    handleEdit () {
      this.dataObj.trophicAnalysis.split(',').forEach((item, index) => {
        this.fileSumList.fileList.push({
          url: item,
          name: '',
          uid: index + 1
        })
      })
      this.dataObj.breakfastImg.split(',').forEach((item, index) => {
        this.fileSumList.fileList1.push({
          url: item,
          name: '',
          uid: index + 1
        })
      })
      this.dataObj.lunchImg.split(',').forEach((item, index) => {
        this.fileSumList.fileList2.push({
          url: item,
          name: '',
          uid: index + 1
        })
      })
      this.dataObj.supperImg.split(',').forEach((item, index) => {
        this.fileSumList.fileList3.push({
          url: item,
          name: '',
          uid: index + 1
        })
      })
      this.ruleForm.breakfast = this.dataObj.breakfast
      this.ruleForm.lunch = this.dataObj.lunch
      this.ruleForm.supper = this.dataObj.supper
    },
    handleFileOtherSuccess (response, file, fileList, item) {
      this.fileListOther.push({
        uid: file.uid,
        name: response.data.name,
        url: response.data.url
      })
    },
    // handleRemove(file, item) {
    //   this.fileSumList[item.filelistName] = this.fileSumList[
    //     item.filelistName
    //   ].filter((eitem) => eitem.uid !== file.uid);
    // },

    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.location.href = file.url
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    },
    handleFileSuccess (response, file, fileList, item) {
      console.log(file, 'handleFileSuccess')
      this.fileSumList[item.filelistName].push({
        uid: file.uid,
        name: response.data.name,
        url: response.data.url
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list__item {
  overflow: inherit;
}
::v-deep .el-form-item {
  margin-bottom: 50px !important;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  .obj_bt_box {
    width: 100%;
    display: flex;
    align-items: center;
    // .box_label {
    // }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
